<template>
  <div>
    <div class="mask" @click="cancel"></div>
    <div class="clearfix linkage">
      <div class="province pickerWrapper">
        <mt-picker :slots="provinces" @change="onProvinceChange" value-key="label" showToolbar>
          <mt-header class="mint-header">
            <mt-button slot="left" @click="cancel" class="sure">取消</mt-button>
          </mt-header>
        </mt-picker>
      </div>
      <div class="city pickerWrapper">
        <mt-picker :slots="citys" @change="onCityChange" value-key="label" showToolbar>
          <mt-header class="mint-header">

          </mt-header>
        </mt-picker>
      </div>
      <div class="area pickerWrapper">
        <mt-picker :slots="areas" @change="onAreaChange" value-key="label" showToolbar>
          <mt-header class="mint-header">
            <mt-button slot="right" @click="confirm" class="sure">确认</mt-button>
          </mt-header>
        </mt-picker>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
      props:{
        areaList:Array,
        provinceId:String,
        cityId:String,
        areaId:String,
      },
    computed: {
      result() {
        return {
          label:this.province.label+this.city.label+this.area.label,
          value:[this.province.value,this.city.value,this.area.value]
        }
      },
    },
    data() {
      return {
        province:{
          label:'',
          value:this.provinceId
        },
        maskFlag:false,
        city:{
          label:'',
          value:this.cityId
        },
        area:{
          label:'',
          value:this.areaId
        },
        flag:0, //最开始省市区那三个picker会初始化调用change事件，但是此时没有省市区数据，因此会报错，
                //所以以这个标识符来控制当时第一次初始化时调用change事件时直接return
        provinces: [
          {
            flex: 1,
            values: this._getProvince(),
            className: 'slot1',
            textAlign: 'center',
            defaultIndex:this._.findIndex(this._getProvince(),(o)=>{
                return o.value == this.provinceId
            })
          }, {
            divider: true,
            content: '-',
            className: 'right'
          }
        ],
        citys: [
          {
            flex: 1,
            values: this._getCity(this.provinceId),
            className: 'slot1',
            textAlign: 'center',
            defaultIndex:this._.findIndex(this._getCity(this.provinceId),(o)=>{
              return o.value == this.cityId
            })
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }
        ],
        areas: [
          {
            flex: 1,
            values: this._getArea(this.provinceId,this.cityId),
            className: 'slot1',
            textAlign: 'center',
            defaultIndex:this._.findIndex(this._getArea(this.provinceId,this.cityId),(o)=>{
              return o.value == this.areaId
            })
          }
        ]

      };
    },
    methods:{
      confirm(){
        this.$emit('getLinkage',this.result); //触发父组件的getLinkage事件接收结果数据
      },
      cancel(){
        this.$emit('getLinkage',{
            label:'',
            value:[this.provinceId,this.cityId,this.areaId]
        });
      },
      onProvinceChange(picker, values) {
        if(this.flag===0){
          return
        }
        let provinceIndex=picker.getSlotValue(0);
        this.province=provinceIndex;
        let city=this._getCity(provinceIndex.value);
        this.citys[0].values=city;
        this.city=city[0]
      },
      onCityChange(picker, values) {
        if(this.flag===0){
          return
        }
        let cityIndex=picker.getSlotValue(0);
        this.city=cityIndex;
        let provinceIndex=this.province;
        let area=this._getArea(provinceIndex.value,cityIndex.value);
        this.areas[0].values=area;
        this.area=area[0]
      },
      onAreaChange(picker, values) {
        if(this.flag===0){
          this.flag=1;
          return
        }
        let areaIndex=picker.getSlotValue(0);
        this.area=areaIndex
      },
      //得到省份数据
      _getProvince(){
        let province=[]
        this.areaList.forEach(function(item,index){
          let obj={}
          obj.value=item.value;
          obj.label=item.label;
          province.push(obj)
        });
        return province
      },
      //根据省份得到城市数据
      _getCity(province){
        let city=[];
        this.areaList.forEach((item,index)=>{
          if(item.value == province){
            !this.isEmpty(item.children)&&item.children.forEach((item,index)=>{
              let obj={};
              obj.value=item.value;
              obj.label=item.label;
              city.push(obj)
              return
            })
          }
        })
        if(!city.length){ //如果没有区域数据则第三个picker显示的内容
          city.push({
            label:'没有',
            value:'000000'
          })
        }
        return city
      },
      //根据城市和省份得到区域数据
      _getArea(province,city){
        let area=[];
        this.areaList.forEach((item)=>{
          if(item.value == province){
            item.children.forEach((item)=>{
              if(item.value == city){
                item.children.forEach((item)=>{
                  let obj={};
                  obj.value=item.value;
                  obj.label=item.label;
                  area.push(obj);
                  return
                })
              }
            })
          }
        });
        if(!area.length){ //如果没有区域数据则第三个picker显示的内容
          area.push({
            label:'没有',
            value:'000000'
          })
        }
        return area
      }
    }
  }
</script>
<style scoped>
  .mask{
    position: fixed;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;
  }
  .linkage{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: white;
    left: 0;
    overflow: hidden;
    z-index: 2;
  }
  .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
  .pickerWrapper{
    width:33.3%;
    float: left;
  }
  .mint-header{
    background-color: #f4f4f4;
    color: #ff7a45;
  }

</style>
